<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>qa tool</title>
    <script type="text/javascript" src="assets/jquery-3.1.1.min.js"></script>
    <script type="text/javascript" src="assets/bootstrap-3.3.5-dist/js/bootstrap.js"></script>
    <link rel="stylesheet" href="assets/bootstrap-3.3.5-dist/css/bootstrap.css"/>
    <script type="text/javascript" src="assets/moment.min.js"></script>
    <link rel="stylesheet" href="assets/bootstrap-datetimepicker.css"/>
    <script type="text/javascript" src="assets/bootstrap-datetimepicker.min.js"></script>
    <script src="assets/sweetalert.min.js"></script>
    <link href="assets/sweetalert.css" rel="stylesheet">

    <style type="text/css" media="all">
        #models {
            display: none;
        }

        #method {
            display: none;
        }

        .margin {
            margin-top: 5%;
        }

        body {
            min-width: 770px;
            overflow-y: scroll !important;
        }

        pre {
            background-color: white;
            border: none;
        }

        .checkbox {
            width: 25px;
            height: 25px;
        }

        .path {
            line-height: 35px;
            margin: 0;
            padding: 0
        }

        .toggle-button {
            float: right;
        }

        .btn-margin {
            margin: 1%;
        }
    </style>
</head>
<body>

<!--导航栏-->
<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <!--铭牌-->
            <a id="brand" class="navbar-brand" href="#">QATool</a>
        </div>
        <div class="collapse navbar-collapse">
            <!--路径导航-->
            <div class="navbar-form navbar-left">
                <ol id="path" class="breadcrumb path"></ol>
            </div>
            <!--搜索框-->
            <div class="navbar-form navbar-right">
                <div class="input-group">
                    <input id="search" type="text" class="form-control" placeholder="搜索工具名、方法名">
                    <span class="input-group-btn">
                        <button class="btn btn-default" type="button" onclick="clickSearch()">搜索</button>
                    </span>
                </div>
            </div>
            <!--相关链接导航-->
            <ul class="nav navbar-nav navbar-right">
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">相关链接<b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="http://animalmobiledev.happyelements.cn/sso/qa_tool.html">DEV</a></li>
                        <li class="divider"></li>
                        <li><a href="http://animalmobile.happyelements.cn/sso/qa_tool.html">手机线上</a></li>
                        <li><a href="http://mobile.app100718846.twsapp.com/sso/qa_tool.html">应用宝线上</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>

<!--模板-->
<div id="models">

    <!--path节点-->
    <li class="path-node"><a href='javascript:void(0)'></a></li>

    <!--jsp面板-->
    <div class="row jsp-panel">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">
                        <a href="javascript:void(0)"><span></span></a>
                        <a class="toggle-button" data-toggle="collapse" href="">
                            <span class="glyphicon glyphicon-chevron-down"></span>
                        </a>
                    </h3>
                </div>
                <div class="panel-collapse collapse in">
                    <div class="panel-body"></div>
                </div>
            </div>
        </div>
    </div>

    <!--方法按钮-->
    <button class="btn btn-default btn-margin" type="button"></button>

    <!--input型参数-->
    <div class="form-group param-INPUT">
        <label></label>
        <p class="help-block"></p>
        <input type="text" class="form-control input">
    </div>

    <!--选择日期+时间型参数，-->
    <div class="form-group param-DATE_TIME_PICKER">
        <label></label>
        <p class="help-block"></p>
        <input type="text" class="form-control input">
    </div>

    <!--选择日期型参数，-->
    <div class="form-group param-DATE_PICKER">
        <label></label>
        <p class="help-block"></p>
        <input type="text" class="form-control input">
    </div>

    <!--textarea型参数-->
    <div class="form-group param-TEXT_AREA">
        <label></label>
        <p class="help-block"></p>
        <textarea rows="4" class="form-control input"></textarea>
    </div>

    <!--checkbox型参数-->
    <div class="form-group param-CHECKBOX">
        <label></label>
        <p class="help-block"></p>
        <input type="checkbox" class="checkbox input"/>
    </div>

    <!--select型参数-->
    <div class="form-group param-SELECT">
        <label></label>
        <p class="help-block"></p>
        <select class="input form-control"></select>
    </div>

    <!--file型参数-->
    <div class="form-group param-FILE">
        <label></label>
        <p class="help-block"></p>
        <input type="file" class="input form-control">
    </div>
</div>

<!--工具列表-->
<div id="list" class="container margin">

</div>

<!--方法界面-->
<div id="method" class="container margin">
    <div class="row">
        <div class="col-lg-4 col-md-6 col-sm-6 col-xs-4">

            <!--参数面板-->
            <div class="panel panel-default">
                <div class="panel-heading">参数</div>
                <div class="panel-body">
                    <form id="param-list" role="form" method="post" enctype="multipart/form-data">

                    </form>
                    <button id="go-btn" type="button" class="btn btn-primary center-block">go</button>
                </div>
            </div>

            <!--隐藏iframe，用来接收表单的返回-->
            <iframe id="hidden-iframe" class="hide" name='hidden-iframe'></iframe>

            <!--隐藏表单，用于EXCEL和PRINT类型-->
            <form id="hidden-form" class="hide" role="form" method="post">

            </form>

            <!--说明面板-->
            <div class="panel panel-default">
                <div class="panel-heading">说明</div>
                <div class="panel-body">
                    <ul id="descs"></ul>
                </div>
            </div>

        </div>
        <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">

            <!--结果面板-->
            <div class="panel panel-default">
                <div class="panel-heading">
                    结果
                    <span id="result-info" class="pull-right"></span>
                </div>
                <div id="result-detail" class="panel-body">
                </div>
            </div>

        </div>
    </div>
</div>


<script type="text/javascript">

    function parseBoolean(str) {
        return str.toLowerCase() == "true";
    }

    function getQueryString(name, def) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
        var r = window.location.search.substr(1).match(reg);
        if (r != null)
            return decodeURIComponent(r[2]);
        if (def == undefined) {
            return null;
        } else {
            return def;
        }
    }

    var jspMap;

    $.ajax({
        async: false,
        type: "GET",
        dataType: 'json',
        url: "qa_tool.jsp",
        data: {
            cookie: document.cookie
        },
        success: function (data) {
            jspMap = data;
            changePath(getQueryString("jspName"), getQueryString("methodName"));
        },
        error: function () {
            sweetAlert("获取工具信息失败");
        }
    });

    $("#search").keydown(function () {
        if (event.keyCode == "13") {
            clickSearch();
        }
    });

    /**
     * 更改路径
     */
    function changePath(jspName, methodName) {
        //改变url，不刷新页面
        var params = jspName ? "?jspName=" + jspName : "?";
        params += methodName ? "&methodName=" + methodName : "";
        window.history.replaceState(null, "", params);

        var pathList = $("#path");
        pathList.empty();

        //主页
        var pathNode = $("#models").find(".path-node");
        var li = pathNode.clone();
        li.find("a").text("主页");
        li.click(function () {
            changePath(null, null);
        });
        pathList.append(li);

        //jsp
        if (!jspName) {
            showList(null, null);
        } else {
            li = pathNode.clone();
            li.find("a").text(jspMap[jspName].name || jspName);
            li.click(function () {
                changePath(jspName, null);
            });
            pathList.append(li);

            //method
            if (!methodName) {
                showList(jspName, null);
            } else {
                li = pathNode.clone();
                li.find("a").text(jspMap[jspName].methodMap[methodName].name || methodName);
                li.click(function () {
                    changePath(jspName, methodName);
                });
                pathList.append(li);
                showMethod(jspName, methodName);
            }
        }

        $("title").html(pathList.find("li:last-child > a").text());
    }

    /**
     * 显示method界面
     */
    function showMethod(jspName, methodName) {
        var paramList = $("#param-list");
        var resultDetail = $("#result-detail");
        var descs = $("#descs");

        //清空面板
        paramList.empty();
        descs.empty();
        $("#result-info").empty();
        resultDetail.empty();

        $("#list").hide();
        $("#method").show();

        var method = jspMap[jspName].methodMap[methodName];

        //设置参数
        $.each(method.params, function (index, param) {
            var paramNode = $("#models").find(".param-" + param.type).clone();
            paramNode.attr("id", "param-" + index);
            var arg = param.name || "arg" + index;
            paramNode.children("label").text(arg);
            paramNode.children(".help-block").text(param.desc);
            paramNode.children(".input").attr("name", arg);
            if (param.type == "CHECKBOX") {
                paramNode.children(".input").attr("checked", parseBoolean(param.defaultValue));
            } else if (param.type == "SELECT") {
                for (var i in param.selectOptions) {
                    var option = param.selectOptions[i];
                    var temp = $("<option></option>");
                    temp.val(option);
                    temp.text(option);
                    if (option == param.defaultValue) {
                        temp.attr("selected", "selected");
                    }
                    paramNode.children(".input").append(temp);
                }
            } else if (param.type == "FILE") {
                //pass
            } else {
                paramNode.children(".input").attr("placeholder", param.defaultValue);
            }
            paramList.append(paramNode);
        });
        $('.param-DATE_TIME_PICKER input').datetimepicker({
            format: 'YYYY-MM-DD HH:mm:ss',
            locale: moment.locale('zh-cn')
        });
        $('.param-DATE_PICKER input').datetimepicker({
            format: 'YYYY-MM-DD',
            locale: moment.locale('zh-cn')
        });

        //设置go按钮
        var goBtn = $("#go-btn");
        goBtn.removeAttr("disabled");
        if (method.type == "EXCEL") {
            goBtn.text("下载");
        } else {
            goBtn.text("go");
        }
        goBtn.unbind("click");
        goBtn.click(function () {
            go(method.type, jspName, methodName);
        });

        //设置说明
        $.each(method.descs, function (index, desc) {
            if (desc) {
                descs.append($("<li class='para'>" + desc + "</li>"));
            }
        });
    }

    /**
     * 显示列表界面
     * @_jspName  为空则显示所有jsp，不为空则只显示这个jsp
     * @keyWord   为空则显示所有方法，不为空则只显示jspName或methodName包含keyWord的方法
     */
    function showList(_jspName, keyWord) {
        $("#method").hide();
        var list = $("#list");
        list.empty();
        list.show();

        keyWord = keyWord || "";

        $.each(jspMap, function (jspName, jsp) {
            if (_jspName && _jspName !== jspName) {
                return;
            }
            var jspDisplayName = jsp.name || jspName;
            var panel = $("#models").find(".jsp-panel").clone();
            panel.find(".panel-title a").eq(0).click(function () {
                changePath(jspName, null);
            });
            panel.find(".panel-title span").eq(0).text(jspDisplayName);
            panel.find(".toggle-button").attr("href", "#collapse-" + jspName);
            panel.find(".panel-collapse").attr("id", "collapse-" + jspName);
            $.each(jsp.methodMap, function (methodName, method) {
                if (method.api) {
                    return;
                }
                var methodDisplayName = method.name || methodName;
                if (!hasKeyWord(jspDisplayName, keyWord) && !hasKeyWord(methodDisplayName, keyWord)) {
                    return;
                }
                var btn = $("#models").find("button").clone();
                btn.text(methodDisplayName);
                btn.click(function () {
                    changePath(jspName, methodName);
                });
                panel.find(".panel-body").append(btn);
            });
            if (panel.find("button").length > 0) {
                list.append(panel);
            }
        });
    }

    function hasKeyWord(str, keyWord) {
        return str.toLocaleLowerCase().indexOf(keyWord.toLocaleLowerCase()) > -1;
    }

    function clickSearch() {
        showList(null, $("#search").val());
    }

    function getUrlAndData(jspName, methodName) {
        var url = jspName + ".jsp?method=" + methodName;
        var data = {};
        $.each(jspMap[jspName].methodMap[methodName].params, function (index, param) {
            var input = $("#param-" + index + " .input");
            var value;
            if (param.type == "CHECKBOX") {
                value = input.is(":checked");
            } else if (param.type == "FILE") {
                value = input[0].files[0];
            } else {
                value = input.val() || input.attr("placeholder");
            }
            data[input.name] = value;
        });
        return [url, data];
    }

    function go(type, jspName, methodName) {
        var resultInfo = $("#result-info");
        var resultDetail = $("#result-detail");
        var goBtn = $("#go-btn");
        var paramList = $("#param-list");
        var urlAndData = getUrlAndData(jspName, methodName);

        var goText = goBtn.text();
        goBtn.text("加载中");
        goBtn.attr("disabled","true");

        resultInfo.empty();
        resultDetail.empty();

        paramList.attr("action", urlAndData[0]);
        if (type == "EXCEL") {
            //下载EXCEL型，提交表单到隐藏iframe
            var iframe = document.getElementById("hidden-iframe");
            iframe.onload = function () {
                var resp = iframe.contentDocument.body.children[0].innerText;
                var data = JSON.parse(resp);
                resultInfo.text(data.info);
                var detail;
                if (type == "HTML" && data.info == "成功") {
                    detail = $("<p></p>").html(data.detail);
                } else {
                    detail = $("<pre></pre>").text(data.detail);
                }
                resultDetail.append(detail);
                goBtn.text(goText);
                goBtn.removeAttr("disabled");
            };
            paramList.attr("target", "hidden-iframe");
            paramList.submit();
            goBtn.text(goText);
            goBtn.removeAttr("disabled");
        } else if (type == "PRINT") {
            //PRINT实时输出型，将表单指向myFrame并提交
            var iframe = $("<iframe width='100%' height='600px' name='myFrame'></iframe>");
            iframe.onload = function () {
                var resp = iframe.contentDocument.body.children[0].innerText;
                var data = JSON.parse(resp);
                resultInfo.text(data.info);
                var detail;
                if (type == "HTML" && data.info == "success") {
                    detail = $("<p></p>").html(data.detail);
                } else {
                    detail = $("<pre></pre>").text(data.detail);
                }
                resultDetail.append(detail);
                goBtn.text(goText);
                goBtn.removeAttr("disabled");
            };
            resultDetail.append(iframe);
            paramList.attr("target", "myFrame");
            paramList.submit();
            goBtn.text(goText);
            goBtn.removeAttr("disabled");
        } else {
            //其它类型，提交表单到隐藏iframe
            var iframe = document.getElementById("hidden-iframe");
            iframe.onload = function () {
                var resp = iframe.contentDocument.body.children[0].innerText;
                var data = JSON.parse(resp);
                resultInfo.text(data.info);
                var detail;
                if (type == "HTML" && data.info == "成功") {
                    detail = $("<p></p>").html(data.detail);
                } else {
                    detail = $("<pre></pre>").text(data.detail);
                }
                resultDetail.append(detail);
                goBtn.text(goText);
                goBtn.removeAttr("disabled");
            };
            paramList.attr("target", "hidden-iframe");
            paramList.submit();
        }
    }

    function submitHiddenForm(urlAndData, target) {
        var form = $("#hidden-form");
        form.empty();
        form.attr("action", urlAndData[0]);
        form.attr("target", target);
        $.each(urlAndData[1], function (key, value) {
            var input = $("<textarea></textarea>");
            input.attr("name", key);
            input.text(value);
            form.append(input);
        });
        form.submit();
    }

</script>

</body>
</html>